<template>
	<!-- 拒绝退货 & 修改理由 弹窗 -->
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="cate-list">
				<view class="info">
					<view class="name">{{info && info.name ? info.name : ""}}</view>
					<view class="price"> {{act == "pay_out" ? '退货金额' : '本单欠款'}}<text >({{oMom}})</text></view>
				</view>
				<view class="ipt-box">
					<view class="i-title">{{act == "pay_out" ? '退款金额' : '收款金额'}}</view>
					<input class="ipt-val" type="text" @input="entPrice" :value="info.money" >
				</view>
				<view class="ipt-box" v-show="info.money > 0">
					<view class="i-title">{{act == "pay_out" ? '退款方式' : '收款方式'}}</view>
					<view class="ipt-val cur-point" @click="togglePriceMask('show')">{{trading}}</view>
					<text class="icon-font cur-point" @click="togglePriceMask('show')">&#xe600;</text>
				</view>
				<view class="ipt-box">
					<dateTimePicker :title="timeTitle" :visible="showTimePicker" @changeTime="changeTime"></dateTimePicker>
				</view>
				<view class="ipt-box" v-show="act == 'pay_in'">
					<view class="i-title">客户余额</view>
					<view class="ipt-val">{{myMoney}}</view>
					<view class="uni-list-cell uni-list-cell-pd">
						<switch @change="switchMon" />
					</view>
				</view>
				<view class="ipt-box">
					<view class="i-title">备注</view>
					<input class="ipt-val" type="text" @input="entTxt" :value="txt" placeholder="请输入备注" placeholder-style="font-size:13px">
				</view>
			
			</view>
			
			<!-- 选择支付方式 -->
			<view class="mask"  @click="togglePriceMask"
				:class="priceMaskState === 0 ? 'none' : priceMaskState === 1 ? 'show' : ''">
				<view class="comm-list mask-content">
					<view class="item" v-for="(item,index) in payList" :key="index"
					 :class="{'active' : index == priceIndex}" @click="selPriceWay(item,index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">完成</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	import util from '../../js/util/Util.js';
	import config from "../../js/conf/Config.js";
	import dateTimePicker from "../comm/dateTimePicker.vue";
	export default {
		components : { dateTimePicker },
		data() {
			return {
				timeTitle:"业务时间",
				act:"",
				title : "收款",
				openShow : 0,
				oMom:0,
				info : {
					money:0,
					name:"",
				},
				
				money:"",//退款/收款金额
				
				trading : "请选择交易方式",//交易方式
				padyId :"",
				time : "请选择业务时间",//业务时间
				timeTxt:"",//提交时间
				txt : "",//备注
				priceIndex : -1,
				payList : [],
				priceMaskState : 0,//选择支付方式状态
				odid:-1,
				callBack:null,
				
				orderType:"",
				myMoney:"",
				isUserMyMoney:false,
				
				showTimePicker:false,
				
				payType:"",
			};
		},
		methods: {
			/*** 选择业务时间 ***/
			kxdatetime(e){
				this.date=e
			},
			
			/*** 输入金额 ***/
			entPrice(e)
			{
				// console.log(e);
				this.info.money = e.detail.value;
			},
			
			/*** 输入备注 ***/
			entTxt(e)
			{
				this.txt = e.detail.value;
			},
			
			/*** 选择交易方式 ***/
			selPriceWay(item,index)
			{
				if(this.priceIndex == index) return;
				this.priceIndex = index;
				this.trading = item.title;
				this.padyId = item.id;
				if(item.paytype)
					this.payType = item.paytype;
				else
					this.payType = "";
			},
			
			togglePriceMask(type)
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.priceMaskState = 2;
				setTimeout(() => {
					this.priceMaskState = state;
				}, timer);
				
			},
			
			/**显示分类面板 type:0付款记录，1：操作记录**/
			toggleBillsStateMask(type,data) 
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
				}, timer);
				if(!type)
				{
					this.showTimePicker = false;
					return;
				}

				this.act = data.act;
				if(this.act == "pay_out")
				{
					this.title = "退款";
				}
				else
				{
					this.title = "收款";
					if(data.money_my)
						this.myMoney = data.money_my;
				}
				
				this.oMom = this.money = this.info.money = data.amount_notpay;
				if(data.customer_info)
					this.info.name = data.customer_info.name;
				this.odid = data.odid;
				// this.payList = data.pay_ls;
				this.setPayList(data);
				this.orderType = data.type;
				this.callBack = data.callBack;
				console.log("data.pay_ls====:",data.pay_ls);
				this.txt = "";
			},
			
			setPayList(data)
			{
				if(data.pay_ls_sys)
				{
					let len = data.pay_ls_sys.length;
					for(let i = 0; i<len; i++)
					{
						let obj = data.pay_ls_sys[i];
						let temp = {};
						temp.id = obj.payid;
						temp.title = obj.title;
						temp.type = obj.type;
						temp.paytype = obj.paytype;
						this.payList.push(temp);
					}
				}
				
				if(data.pay_ls)
				{
					let len = data.pay_ls.length;
					for(let i = 0; i<len; i++)
					{
						let obj = data.pay_ls[i];
						if(obj.status != 1)continue;
						let temp = {};
						temp.id = obj.id;
						temp.title = obj.title;
						temp.cpid = obj.cpid;
						this.payList.push(temp);
					}
				}
			},
			
			close()
			{
				this.toggleBillsStateMask();
			},
			
			changeTime(txt)
			{
				this.timeTxt = txt;
			},
			
			switchMon(e)
			{
				console.log(e);
				this.isUserMyMoney = e.detail.value;
			},
			
			submit()
			{
				console.log("this.isUserMyMoney===========:",this.isUserMyMoney);
				console.log("this.info.money==============:",this.info.money);
				if(!this.isUserMyMoney && this.info.money <= 0)
				{
					this.$msg({title:this.act == "pay_out" ? "退款" : "收款" + "金额，必须大于0"});
					return;
				}
				
				
				// if(this.act == "pay_out" && this.money > this.info.money)
				// {
				// 	this.$msg({title:"退款不能大于应退金额"});
				// 	return;
				// }
				
				if(this.padyId == "")
				{
					this.$msg({title:"请填选择支付方式！"});
					return;
				}
				
				let obj = {};
				obj.act = this.act;
				obj.odid = this.odid;
				obj.type = this.orderType;
				obj.amount_receive = this.info.money;
				obj.payid = this.padyId;
				obj.atime_txt = this.timeTxt;
				// if(this.payType != "")
				obj.paytype = this.payType;
				if(this.act == "pay_in" && this.isUserMyMoney)
					obj.money = this.myMoney;
				obj.txt = this.txt;
				if(this.callBack != null)
				{
					this.callBack.call(null,obj);
					this.callBack = null;
				}
				this.toggleBillsStateMask();
			},
			
		},
	}
</script>
<style lang="scss">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9999;
		transition: 0.3s;
		.mask-content {
			width: 100%;
			max-height: 250px;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			.item
			{
				border-bottom: 1px solid #ECECEC;
				padding: 10px 20px;
			}
			.active
			{
				color: #3388FF;
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.item-info {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.cate-content {
			border-radius: 6px;
			overflow: hidden;
			width: 500px;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			position: relative;
			.item-fixed-top
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 16px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
		}
	
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.cate-content {
				transform: translateY(0);
			}
		}
	}
	.bg-color
	{
		background: #E6E6E6;
		padding: 10px;
	}
	.cate-list
	{
		height: 500px;
		.info
		{
			padding: 20px;
			background: #F2F2F2;
			.name
			{
				font-size: 18px;
			}
			.price
			{
				font-size: 14px;
				text{ 
					margin-left: 10px;
					color : red;
				}
			}
		}
		.ipt-box
		{
			border-bottom: 1px solid #ECECEC;
			padding: 10px 20px;
			display: flex;
			align-items: center;
			position: relative;
			.i-title
			{
				width: 80px;
			}
			.ipt-val
			{
				width: 350px;
			}
			
			.cur-point
			{
				cursor: pointer;
			}
			
			text
			{
				position: absolute;
				right: 10px;
				color: #999;
			}
		}
	}
	.btn
	{
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #3388FF;
		color: #FFF;
		font-size: 16px;
		z-index: 999;
		cursor: pointer;
	}
</style>